import React, { 
  useState, 
  useEffect, 
  useContext, 
  useCallback, 
  // useMemo, 
  // useReducer, 
  useRef 
} from 'react'

// 引入创建的上下文
import ThemeContext from '@/utils/themeContext'

const set = new Set()
export default () => {

  const [num, setNum] = useState(1)
  const theme = useContext(ThemeContext)

  const [count, setCount] = useState(1)
  const [val, setVal] = useState('')

  useEffect(() => {
    console.log( '触发了useEffect' )
    return undefined
  }, [])

  const callback = useCallback(() => {
    console.log( count )
    return count
  })
  set.add(callback)
  console.log( set )

  function add () {
    setNum(num + 1)
  }

  const Child = ({callback}) =>{
    const [count,setCount] = useState(0)
    
    useEffect(()=>{
      setCount(callback())
    }, [callback]) //当callback更新时执行callback函数，得到parent组件最新的count
  
    return <>
      child count:{count}
    </>
  }

  const inputRef = useRef() 
	const getValue= () => {
		//访问ref
    console.log( inputRef )
		console.log(inputRef.current.value) 
  }

  return (
    <div className="hooks">
      <h1>{num}</h1>
      <button 
        onClick={add}
        style={{ background: theme.background, color: theme.foreground }}
      >
        增加
      </button>

      <hr />
      <h4>parent count:{count}</h4>
      <h4>set size:{set.size}</h4>
      <div>
        <button onClick={() => setCount(count + 1)}>+</button>
        <input value={val} onChange={event => setVal(event.target.value)}/>
      </div>
      <Child callback={callback} />

      <hr />
      <p>useRef的使用</p>
      <input ref={inputRef} type="text" />
      <button onClick={getValue}>获取input的值</button>
    </div>
  )
}